<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多维散点图</title>
    <script src="../echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main" style="width: 900px; height: 600px"></div>

    <script>
        // 基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        var dataAll = [
            [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
            ],
            [
                [10.0, 9.14],
                [8.0, 8.14],
                [13.0, 8.74],
                [9.0, 8.77],
                [11.0, 9.26],
                [14.0, 8.10],
                [6.0, 6.13],
                [4.0, 3.10],
                [12.0, 9.13],
                [7.0, 7.26],
                [5.0, 4.74]
            ],
            [
                [10.0, 7.46],
                [8.0, 6.77],
                [13.0, 12.74],
                [9.0, 7.11],
                [11.0, 7.81],
                [14.0, 8.84],
                [6.0, 6.08],
                [4.0, 5.39],
                [12.0, 8.15],
                [7.0, 6.42],
                [5.0, 5.73]
            ],
            [
                [8.0, 6.58],
                [8.0, 5.76],
                [8.0, 7.71],
                [8.0, 8.84],
                [8.0, 8.47],
                [8.0, 7.04],
                [8.0, 5.25],
                [19.0, 12.50],
                [8.0, 5.56],
                [8.0, 7.91],
                [8.0, 6.89]
            ]
        ]

        var markLineOpt = {
            animation: false,
            label: {
                normal: {
                    formatter: 'y = 0.5 * x + 3',
                    textStyle: {
                        align: 'right'
                    }
                }
            },
            lineStyle: {
                normal: {
                    type: 'solid'
                }
            },
            tooltip: {
                formatter: 'y = 0.5 * x + 3'
            },
            data: [[{
                coord: [0, 3],
                symbol: 'none'
            }, {
                coord: [20, 13],
                symbol: 'none'
            }]]
        }

        // 指定图表的配置项和数据
        option = {
        // title: {
            //     text: 'Anscombe\'s quartet',
            //     x: 'center',
            //     y: 0
            // },
            // 直角坐标系内绘图网格
            grid: [
                {x: '7%', y: '7%', width: '25%', height: '25%'},
                {x: '7%', y2: '7%', width: '25%', height: '25%'},
                {x: '7%', y2: '7%', width: '25%', height: '25%'},
                {x: '50%', y3: '7%', width: '25%', height: '25%'}
            ],
            tooltip: {
                formatter: 'Group {a}: ({c})'
            },
            // x轴
            xAxis: [
                {
                    name: '风速1(M/S)',
                    // x 轴所在的 grid 的索引，默认位于第一个 grid
                    gridIndex: 0,
                    min: 0, // 坐标轴刻度最小值
                    max: 20 // 坐标轴刻度最大值 不设置时会自动计算最大值保证坐标轴刻度的均匀分布
                },
                {
                    name: '风速2(M/S)',
                    gridIndex: 1,
                    min: 0,
                    max: 20
                },
                {
                    name: '风速3(M/S)',
                    gridIndex: 2,
                    min: 0,
                    max: 20
                },
                {
                    name: '风速4(M/S)',
                    gridIndex: 3,
                    min: 0,
                    max: 20
                }
            ],
            yAxis: [
                {gridIndex: 0, min: 0, max: 15},
                {gridIndex: 1, min: 0, max: 15},
                {gridIndex: 2, min: 0, max: 15},
                {gridIndex: 3, min: 0, max: 15}
            ],
            series: [
                {
                    name: 'I',
                    type: 'scatter',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: dataAll[0],
                    markLine: markLineOpt
                },
                {
                    name: 'II',
                    type: 'scatter',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: dataAll[1],
                    markLine: markLineOpt
                },
                {
                    name: 'III',
                    type: 'scatter',
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    data: dataAll[2],
                    markLine: markLineOpt
                },
                {
                    name: 'IV',
                    type: 'scatter',
                    xAxisIndex: 3,
                    yAxisIndex: 3,
                    data: dataAll[3],
                    markLine: markLineOpt
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>
</body>
</html>
